<template>
    <view style="background-color: #fff;">
		<view class="header_wi">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_detail.Commodity_list') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
        <view class="list-header">
            <!-- 搜索框 -->
            <view class="index-search-box dis-flex">
                <view class="index-search flex-box" @tap.stop.prevent="triggerSearch">
                    <view class="index-cont-search">
                        <icon class="text-center" style="top:24%!important;" size="15" type="search"></icon>
                        <text>{{ option.search ? option.search : '搜索商品' }}</text>
                    </view>
                </view>
                <view @tap="onChangeShowState" class="list-right f-28">
                    <text class="iconfont icon-tubiao_kuaizhuangpailie" v-if="showView"></text>
                    <text class="iconfont icon-tubiao_liebiaopailie" v-else></text>
                </view>
            </view>

            <!-- 筛选标签 -->
            <view class="store_nav_cont dis-flex b-f b-b">
                <view @tap="switchSortType" data-type="all" class="flex-box t-c p-r" data-index="0 " :id="'list-' + (sortType === 'all' ? true : 0)">
                    <text>综合</text>
                </view>
                <view @tap="switchSortType" data-type="sales" class="flex-box t-c p-r" data-index="1" :id="'list-' + (sortType === 'sales' ? true : 0)">
                    <text>销量</text>
                </view>
                <view @tap="switchSortType" data-type="price" class="dis-flex flex-x-center flex-box t-c p-r" data-index="2" :id="'list-' + (sortType === 'price' ? true : 0)">
                    <text class="price__text">价格</text>
                    <view class="price__arrow dis-flex flex-dir-column flex-x-center flex-y-center">
                        <text :class="'iconfont icon-arrow-top ' + (sortPrice ? '' : 'active')"></text>
                        <text :class="'iconfont icon-arrow-bottom ' + (sortPrice ? 'active' : '')"></text>
                    </view>
                </view>
            </view>

            <!-- 商品列表 -->
            <scroll-view @scrolltolower="bindDownLoad" scroll-y :style="'height: ' + scrollHeight + 'px; width: 750rpx;'" v-if="list.data.length > 0">
                <view class="new">
                    <view :class="'category-list ' + (showView ? 'arrange' : '')">
                        <navigator class="list b-f" hover-class="none" :url="'../goods/index?goods_id=' + item.goods_id" v-for="(item, index) in list.data" :key="item.list">
                            <view class="left">
                                <view class="img">
                                    <image class="goodsImg" mode="scaleToFill" :src="item.goods_image"></image>
                                </view>
                            </view>

                            <view class="right">
                                <view class="cont">
                                    <!-- 商品名称 -->
                                    <text class="title f-29 twolist-hidden">{{ item.goods_name }}</text>
                                    <block v-if="showView">
                                        <!-- 商品卖点 -->
                                        <view class="selling_point onelist-hidden">
                                            <text>{{ item.selling_point }}</text>
                                        </view>
                                        <!-- 商品销量 -->
                                        <view class="goods_sales dis-flex">
                                            <text class="onelist-hidden">已售{{ item.goods_sales }}件</text>
                                        </view>
                                    </block>
                                    <!-- 商品价格 -->
                                    <view class="detail-price onelist-hidden">
                                        <text class="goods-price f-30 col-m">￥{{ item.goods_sku.goods_price }}</text>
                                        <text class="line-price col-9 f-24" v-if="item.goods_sku.line_price > 0">{{ item.goods_sku.line_price }}</text>
                                    </view>
                                </view>
                            </view>
                        </navigator>
                    </view>
                </view>
                <view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
            </scroll-view>
        </view>

        <!-- 无数据 -->
        <view v-if="!isLoading && !list.data.length" class="yoshop-notcont" style="margin-top: 130px">
            <view class="img">
                <image mode="aspectFit" src="/static/images/no_content.png"></image>
            </view>
            <text class="cont">亲, 没有相关内容</text>
        </view>
    </view>
</template>

<script>
const app = getApp();
const pageIndex = 'category/list::';
export default {
    data() {
        return {
            scrollHeight: null,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
            showView: false,
            // 列表显示方式
            sortType: 'all',
            // 排序类型
            sortPrice: false,
            // 价格从低到高
            option: {
                search: false
            },
            // 当前页面参数
            list: {
                data: {
                    length: 0
                }
            },
            // 商品列表数据
            no_more: false,
            // 没有更多数据
            isLoading: true,
            // 是否正在加载中
            page: 1 // 当前页码
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(option) {
        let _this = this; // 设置商品列表高度

        _this.setListHeight(); // 记录option

        _this.setData({
            option
        }); // 设置列表显示方式

        _this.setShowView(); // 获取商品列表

        _this.getGoodsList();
    },
    /**
     * 设置分享内容
     */
    onShareAppMessage() {
        // 构建分享参数
        return {
            title: '全部分类',
            path: '/pages/category/index?' + app.globalData.getShareUrlParams()
        };
    },
    methods: {
		jumpzuo() {
		    uni.navigateBack()
		},
        /**
         * 设置默认列表显示方式
         */
        setShowView() {
            let _this = this;

            _this.setData({
                showView: uni.getStorageSync(pageIndex + 'showView') || false
            });
        },

        /**
         * 获取商品列表
         * @param {bool} isPage 是否分页
         * @param {number} page 指定的页码
         */
        getGoodsList(isPage, page) {
            let _this = this;

            app.globalData._get(
                'goods/lists',
                {
                    page: page || 1,
                    sortType: this.sortType,
                    sortPrice: this.sortPrice ? 1 : 0,
                    category_id: this.option.category_id || 0,
                    search: this.option.search || ''
                },
                (result) => {
                    let resList = result.data.list;
                    let dataList = _this.list;
                    if (isPage == true) {
                        _this.setData({
                            'list.data': dataList.data.concat(resList.data),
                            isLoading: false
                        });
                    } else {
                        _this.setData({
                            list: resList,
                            isLoading: false
                        });
                    }
                }
            );
        },

        /**
         * 设置商品列表高度
         */
        setListHeight() {
            let _this = this;

            uni.getSystemInfo({
                success: (res) => {
                    _this.setData({
                        scrollHeight: res.windowHeight - 90
                    });
                }
            });
        },

        /**
         * 切换排序方式
         */
        switchSortType(e) {
            let _this = this;

            let newSortType = e.currentTarget.dataset.type;
            let newSortPrice = newSortType === 'price' ? !this.sortPrice : true;
            this.setData(
                {
                    list: {},
                    isLoading: true,
                    page: 1,
                    sortType: newSortType,
                    sortPrice: newSortPrice
                },
                () => {
                    // 获取商品列表
                    _this.getGoodsList();
                }
            );
        },

        /**
         * 切换列表显示方式
         */
        onChangeShowState() {
            let _this = this;

            let showView = !_this.showView;
            uni.setStorageSync(pageIndex + 'showView', showView);

            _this.setData({
                showView
            });
        },

        /**
         * 下拉到底加载数据
         */
        bindDownLoad() {
            // 已经是最后一页
            if (this.page >= this.list.last_page) {
                this.setData({
                    no_more: true
                });
                return false;
            } // 加载下一页列表

            this.getGoodsList(true, ++this.page);
        },

        /**
         * 商品搜索
         */
        triggerSearch() {
            let pages = getCurrentPages(); // 判断来源页面

            if (pages.length > 1 && pages[pages.length - 2].route === 'pages/search/index') {
                uni.navigateBack();
                return;
            } // 跳转到商品搜索

            uni.navigateTo({
                url: '../search/index'
            });
        }
    }
};
</script>
<style>
@import './list.css';
</style>
